/*

思路：
(1) 实现箭头按钮切换
	1) 获取显示区域宽度, 点击左右箭头时, 偏移量 = 显示区域宽度
	2) 实现循环切换
(2) 实现圆点导航显示
	1) 给出标识位 index = 1, 点击左右箭头时, 对 index 进行加减
	2) 设置 index 位置上的圆点 class = 'on'
(3) 实现圆点导航切换
	1) 计算当前位置与目标位置偏移量之差
	2) 调用 move () 方法
(4) 动画过渡, 修改 move () 方法
	1) 设定位移总时间
	2) 设定位移间隔时间
	3) 计算 每次所需偏移量 = 总宽度 / (偏移时间);
(5) 自动播放
	1) 设置定时器, 在鼠标无动作时调用 move ()
	2) 鼠标划过时, 清除定时器

*/

window.onload = function () {

	var container = document.getElementById('container');
	var list = document.getElementById('list');
	var pics = list.getElementsByTagName('img');
	var pic = pics[0];
	var buttons = document.getElementById('buttons').getElementsByTagName('span');
	var prev = document.getElementById('prev');
	var next = document.getElementById('next');
	var index = 1;

	// 移动
	function move (offset) {
		var oldLeft = parseInt(list.style.left);	// 原始位置
		var newLeft = oldLeft + offset;		//新位置
		var time = 300;		//位移总时间
		var interval = 10;	//位移间隔时间

		var speed = offset / (time/interval);

		var timer = setInterval(go,interval);
		function go () {
			var currentLeft = parseInt(list.style.left);
			if ((speed<0 && currentLeft>newLeft) || (speed>0 && currentLeft<newLeft)) {
				list.style.left = parseInt(list.style.left) + speed + 'px';
			}else {
				clearInterval(timer);
				if (newLeft > 0) {
					newLeft = - (pics.length - 3) * pic.width;
				} else if (newLeft < - (pics.length - 3) * pic.width) {
					newLeft = 0;
				}
				list.style.left = newLeft + 'px';
			}
		}
	}

	// 圆点导航显示
	function showButtons () {
		for(let i = 0 ; i < buttons.length ; i++){
			if (buttons[i].className == 'on') {
				buttons[i].className = '';
				break;
			}
		}
		buttons[index - 1].className = 'on';
	}

	// 下一张
	next.onclick = function () {
		move(-pic.width);
		index++;
		if (index > buttons.length) {
			index = 1;
		}
		showButtons();
	}

	//上一张
	prev.onclick = function () {
		move(pic.width);
		index--;
		if (index < 1) {
			index = buttons.length;
		}
		showButtons();
	}

	// 圆点导航切换
	for(let i = 0; i < buttons.length ; i++){
		buttons[i].id = i+1;
		buttons[i].onclick = function () {
			// 偏移量 = 点击位置 - 当前位置
			var offLen = this.id - index;
			if (!offLen) {
				return;
			}
			move(-offLen * pic.width);
			index = this.id;
			showButtons();
		}
	}

	var timer;
	// 自动播放
	function autoPlay () {
		timer = setInterval(function () {
			next.onclick();
		},3000);
	}
	function stop () {
		clearInterval(timer);
	}

	list.onmouseover = stop;
	list.onmouseout = autoPlay;
}